<template>
    <div class="background">
        <div class="plm-bimtable">
    <div id="container"/>
    </div>
    </div>
</template>
<script>
import mytable from "@/components/table";
import * as Three from 'three'
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
export default {
    components:{
        mytable
    },
    data() {
        return {
            camera:null,
            scene:null,
            light:null,
            controls:null
        }
    },
      mounted() {
        this.init();
        this.animate();
    },
    methods: {

    init() {

      let container = document.getElementById("container");

      this.camera = new Three.PerspectiveCamera(70,container.clientWidth / container.clientHeight,0.01,100000);

      this.camera.position.z = 50;

      this.scene = new Three.Scene();
      
      //添加环境光
      var AmbientLight = new Three.AmbientLight( 0xffffff,0.2 );
      this.scene.add(AmbientLight)

      //添加平行光
      this.light=new Three.DirectionalLight( 0xffffff,1 );
      this.light.position.set( 1,1, 1 );
      this.light.castShadow = true; // default false
      this.light.shadow.camera.near=-10000
      this.light.shadow.camera.left=-20
      this.light.shadow.camera.right=20
      this.light.shadow.camera.top=20
      this.light.shadow.camera.bottom=-20
      this.light.shadow.camera.width=2048
      this.light.shadow.camera.height=2048
      // this.light.shadow.bias=0.00000000001
      this.scene.add(this.light)

      let geometry = new Three.BoxGeometry(1, 1, 1);

      let material = new Three.MeshLambertMaterial({color: 0x808080,side: Three.DoubleSide, roughness: 1, metalness:1, shadowSide: Three.FrontSide});
      
      let helper = new Three.CameraHelper(this.light.shadow.camera);
      this.scene.add(helper)
      // let loader = new OBJLoader();
      let loader = new FBXLoader();
        // 加载fbx文件
        loader.load('/static/model/model1.fbx', (model) => {
        // 将模型添加到场景中
        model.children.map(item=>{
          item.material=material
          item.castShadow = true; // cast投射，方块投射阴影 
          item.receiveShadow = true; // 物体接收阴影
        })
        model.scale.set(0.1, 0.1, 0.1);
        model.castShadow = true; // cast投射，方块投射阴影 
        model.receiveShadow = true; // 物体接收阴影
        console.log(model);
        this.scene.add(model);
        }, (event) => {
        // 控制台打印加载进度
        console.log((event.loaded / event.total * 100) + '% loaded');
        }, (error) => {
        // 控制台打印加载失败
        console.error(error);
        });

      this.mesh = new Three.Mesh(geometry, material);

      this.scene.add(this.mesh);

      this.renderer = new Three.WebGLRenderer({ antialias: true,alpha: true  });

      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.shadowMap.enabled=true
      this.renderer.shadowMap.type = Three.PCFSoftShadowMap; // default 
      container.appendChild(this.renderer.domElement);

      this.controls = new OrbitControls(this.camera,this.renderer.domElement)
				// // 监听控制器的鼠标事件，执行渲染内容
				// this.controls.addEventListener('change',()=>{
				// 	this.renderer.render(this.scene,this.camera)
				// })

    },

    animate() {
      this.controls.update()
      this.mesh.rotation.x+=0.1
      this.mesh.rotation.y+=0.2
      requestAnimationFrame(this.animate);


      this.renderer.render(this.scene, this.camera);

    },

  },


}
</script>
<style lang="scss" scoped>
.background{
    background:#fff;
    height:100%;
    padding:10px;
}
#container {

  height: calc(100vh - 90px);
    width:calc(100% - 20px);
}
</style>